<template>
  <view class="container">
    <view>
      <view class="status_bar">
        <!-- 这里是状态栏 -->
      </view>
    </view>
    <view class="container-flex">
      <view class="my-head">
	  <view class="head-title">
		  <!-- 我的 -->
	  </view>
        <view class="mh-person">
          <image v-if="loginState" class="mh-p-img" :src="userData.imgUrl" mode="aspectFill"></image>
          <view v-else class="mh-p-img mh-p-img-bg">
            <text class="iconfont icon-wode"></text>
          </view>
          <view v-if="loginState" class="mh-p-center">
            <view class="mh-pc-view">
              <view class="mh-pc-text1">{{ userData.userName }}</view>
              <view class="mh-pc-text2">{{ userData.phone }}</view>
            </view>
          </view>
          <view v-else class="mh-p-center" @tap="login">登录</view>
        </view>
        <view class="mh-p-data" v-if="!isTest">
          <view class="mh-pd-item" @click="tomyjifen">
            <image class="icon" src="/static/img/my/icon_mypurse.png"></image>
            <text class="mh-pti-text2">我的积分</text>
          </view>
          <view class="mh-pd-item" @tap="tmyOrder">
            <image class="icon" src="/static/img/my/icon_2.png"></image>
            <text class="mh-pti-text2">我的订单</text>
          </view>
        </view>
      </view>
      <view class="my-nav-main" >
        <view v-for="(item, index) in subMenu" :key="index" class="my-nav-item" @tap="toUrl(item)" v-if="!isTest">
          <view class="my-ni-left">
            <image class="icon" :src="item.icon"></image>
            <text class="my-ni-text">{{item.name}}</text>
          </view>
          <view class="my-ni-right">
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
		<view class="my-nav-item"  v-if="isTest"  @click="zhss">
		  <view class="my-ni-left">
		    <image class="icon" src="/static/img/my/icon_7.png"></image>
		    <text class="my-ni-text" style="color: #EA0A0A;">注销</text>
		  </view>
		  <view class="my-ni-right">
		    <uni-icons type="right" size="16"></uni-icons>
		  </view>
		</view>
      </view>
	  <view class="loginOut" @click="logOut">
	  	退出登录
	  </view>
    </view>
  </view>
</template>

<script>
// pages/my/my.js
const api = require('../../config/api')
const util = require('../../utils/util')
const app = getApp()
export default {
	name: 'my',
  data() {
    return {
		isTest: null,
      pageLoad: true,
      loginState: false,
      userData: {},
      show: false,
      uid: '1',
      token: '123321123',
      subMenu: [
        { name: '个人中心', icon: '/static/img/my/icon_1.png', url: '/pages/my/personCenter' },
        { name: '实名认证', icon: '/static/img/my/icon_8.png', url: '/pages/my/nameAuth' },
        { name: '推广名片', icon: '/static/img/my/icon_10.png', url: '/pages/marketingPoster/marketingPoster' },
        { name: '消息中心', icon: '/static/img/my/icon_5.png', url: '/pages/notice/noticeCenter' },
        { name: '地址管理', icon: '/static/img/my/icon_3.png', url: '/pages/address/addressManager' },
        { name: '我的银行卡', icon: '/static/img/my/icon_mybank.png', url: '/pages/my/myBankCard' },
        { name: '设置', icon: '/static/img/my/icon_6.png', url: '/pages/Set/Set' }
      ]
    }
  },
  onLoad(options) {
	  // this.getUserInfo()
  },
  onShow() {
	  this.isTest = uni.getStorageSync('isTest')
  	 this.getUserInfo()
  },
  methods: {
	  zhss() {
	  	uni.showModal({
	  		title: '是否注销账户？',
	  		content: '注：确认后操作无法撤回！！',
	  		cancelText: "取消", // 取消按钮的文字  
	  		confirmText: "确认", // 确认按钮的文字  
	  		showCancel: true, // 是否显示取消按钮，默认为 true
	  		confirmColor: '#f55850',
	  		cancelColor: '#39B54A',
	  		success: (res) => {
	  			if (res.confirm) {
	  				uni.removeStorageSync("token");
	  				uni.removeStorageSync("isTest");
	  				uni.redirectTo({
	  					url: '/pages/login/login'
	  				});
	  			} else {}
	  		}
	  	})
	  },
	  tmyOrder(){
		  uni.navigateTo({
		  	url: '/pages/order/myOrder'
		  });
	  },
	  logOut() {
	  	uni.removeStorageSync("token");
		uni.reLaunch({
			url: '/pages/login/login'
		})
	  	
	  },
	  tomyjifen(){
		  uni.navigateTo({
		    url: '/pages/indexChild/Redeem/Redeem'
		  })
	  },
	  tomyjifen(){
	  		  uni.navigateTo({
	  		    url: '/pages/indexChild/Redeem/Redeem'
	  		  })
	  },
	async getUserInfo() {
		const res = await util.request(api.getUserInfoUrl, {}, 'POST')
		// console.log(res)
		if (res.code !== 0) {
			this.loginState = false
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		} else {
			this.loginState = true
			this.userData = res.data.user
			// console.log(res.data.user)
		}
	},
    login() {},
    toUrl(item) {
      // var userToken = uni.getStorageSync('userToken')
      // if (userToken == '' || userToken == undefined) {
      //   fail('您未登录')
      // } else {
		  
  if(item.url == '/pages/my/nameAuth'){
	  this.getUserInfoAuth();
	  
  }else{
	      uni.navigateTo({ url: item.url })
  }
      // }
    },
	async getUserInfoAuth() {
		const res = await util.request(api.getUserInfoUrl, {}, 'POST')
		console.log(res)
		if (res.code !== 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		} else {
			if (res.data.realName) {
				uni.navigateTo({
					url: '/pages/my/nameAuth'
				})
			} else {
					uni.navigateTo({
						url: '/pages/my/myBankCard?from=nameAuth'
					})
			}
		}
	},
  }
}
</script>
<style lang="scss" scoped>
.status_bar {
  width: 100%;
  height: var(--status-bar-height);
  padding: 10px 0;
  background-color: #9ACCFD;
  text-align: center;
  color: #fff;
}
.container {
  height: 100vh;
  overflow: hidden;
  background-color: #f6f6f6;
}

.my-head {
  width: 100%;
  height: 180px;
  // background-color: #6a9ffb;
  	background-image: linear-gradient(to bottom, #9ACCFD, #EBF0F6);
  margin-bottom: 40px;
  padding-top: 10px;
  .head-title {
	  font-size: 16px;
	  text-align: center;
	  color: #ffffff;
  }
}

.mh-person {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  margin-left: 15px;
  position: relative;
  // margin-top: -20px;
  margin-top: 20px;

  .mh-p-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    &.mh-p-img-bg {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      .iconfont {
        font-size: 2.25rem;
        color: #999999;
      }
    }
  }
  .mh-p-center {
    flex: 1;
    color: #fff;
    margin-right: 10px;
    font-size: 1rem;

    .mh-pc-view {
      .mh-pc-text1 {
        font-size: 1rem;
        color: #fff;
        margin-right: 10px;
      }
      .mh-pc-text2 {
        font-size: 0.75rem;
        color: #fff;
        margin-right: 10px;
      }
    }
  }
}

.mh-p-data {
  display: flex;
  height: auto;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 40px;
   // margin-top: 80px;
  background-color: #fff;
  border-radius: 5px;

  .mh-pd-item {
    padding: 10px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .mh-pti-text1 {
      font-size: 1.125rem;
      font-weight: bold;
      margin-bottom: 3px;
    }

    .mh-pc-text2 {
      font-size: 0.75rem;
    }
  }
}

.my-nav-main {
  flex: 1;
  width: 100%;
  padding: 0 15px;
  overflow: auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .my-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    &:last-child {
      border-bottom: none;
    }
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .my-ni-left {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 0.75rem;
      }
    }
    .my-ni-right {
      display: flex;
      align-items: center;
      color: #999;
      .iconfont {
        font-size: 0.75rem;
      }
    }
  }
}
.loginOut{
	width: 225px;
	height: 44px;
	margin: 10px auto;
	text-align: center;
	// padding-right: 15px;
	color: #fff;
	font-size: 14px;
	line-height: 44px;
	background-color: #6A9FFB;
	border-radius: 5px;
}
</style>